/*
描述：首页视图组件，包含问题展示、分类导航和最近问题列表等功能
完成人：何艺珲
完成时间: 2025/04/26
*/


<script setup lang="ts">

import { ref } from "vue";

// 导入所有组件
import QuestionComponent from '../components/HomeView/QuestionComponent.vue';
import RecentQuestion from '../components/HomeView/RecentQuestion.vue';
import HeaderComponent from "../components/HomeView/HeaderComponent.vue";



// 当前选中的组件
const currentComponent = ref(0);

const switchComponent = (component: number) => {
  currentComponent.value = component;
};



</script>

<template>

  <div class="common-layout">
    <el-container>
      <HeaderComponent /> <!-- 使用 HeaderComponent -->
      <el-container>
        <el-aside width="20%" style="height: 100vh">
          <div class="sidebar-menu">
            <button
              class="sidebar-button"
              :class="{ selected: currentComponent === 0 }"
              @click="switchComponent(0)"
            >
              热门
            </button>
            <button
              class="sidebar-button"
              :class="{ selected: currentComponent === 1 }"
              @click="switchComponent(1)"
            >
              编程
            </button>
            <button
              class="sidebar-button"
              :class="{ selected: currentComponent === 2 }"
              @click="switchComponent(2)"
            >
              生活
            </button>
            <button
              class="sidebar-button"
              :class="{ selected: currentComponent === 3 }"
              @click="switchComponent(3)"
            >
              学习
            </button>
            <button
              class="sidebar-button"
              :class="{ selected: currentComponent === 4 }"
              @click="switchComponent(4)"
            >
              AI
            </button>
            <button
              class="sidebar-button"
              :class="{ selected: currentComponent === 5 }"
              @click="switchComponent(5)"
            >
              运动
            </button>
          </div>
        </el-aside>
        <el-main class="body">
          <QuestionComponent :current-component="currentComponent"/>

        </el-main>
        <el-aside width="20%">
          <div class="sidebar-menu-right">
            <RecentQuestion/>
          </div>



        </el-aside>
      </el-container>
    </el-container>
  </div>


</template>

<style scoped>

*{
  background-color: #F9FAFA;
}


.body{
  height: 100%;
  padding: 84px 20px 20px 20px;
}

.logo span{
  background-color: white;
  margin-left: 7px;
  font-size: 20px;
  color: #BCBBBB;

}
.sidebar-menu-right {
  position: fixed;  /* 元素脱离文档流，相对于浏览器窗口固定定位 */
  top: 84px;
}
/* 侧边栏菜单样式 */
.sidebar-menu {
  position: fixed;  /* 元素脱离文档流，相对于浏览器窗口固定定位 */
  top: 64px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px 0;
  margin-left: 2%;
  width: 20%;
}

.sidebar-button {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-radius: 20px;
  border: none;
  background-color: #F1F2F3;
  color: #3B4045;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  width: 70%;
  margin: 0 auto;
}

.sidebar-button:hover {
  background-color: #E3E6E8;
}

.sidebar-button.selected {
  background-color: #E7700D;
  color: white;
}

</style>
